<template>
  <div class="gauge-long-group">
    <div>{{ title }}</div>
    <div v-if="title == '柴油车' && grouplist.fuelTypes">
      {{ myCount(grouplist.fuelTypes["柴油"]) }}
    </div>
    <div v-if="title == '天然气' && grouplist.fuelTypes">
      {{ myCount(grouplist.fuelTypes["天然气"]) }}
    </div>
  </div>
</template>

<script>
export default {
  name: "GaugeLongGroup",
  props: {
    title: {
      type: String,
      default: "",
    },
    grouplist: {
      type: Object,
      default: {},
    },
  },
  watch: {
    grouplist: {
      /*immediate:true,*/
      deep: true,
      handler(newValue, oldValue) {
        // console.log(newValue,oldValue)
      },
    },
  },
  methods: {
    myCount(str) {
      return this.myfun.myformat(str);
    },
  },
};
</script>

<style scoped lang="scss">
.gauge-long-group {
  div {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &:nth-child(1) {
      line-height: 13px;
      height: 13px;
      font-size: 13px;
      color: #119cea;
      margin: 15px 0px 9px 0px;
    }
    &:nth-child(2) {
      line-height: 19px;
      height: 19px;
      font-size: 22px;
      color: #f0f6fb;
    }
  }
}
</style>
